<template>
  <div class="wapper">
    <div class="box1">
      <span>数藏管理系统</span>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item  prop="name">
          <el-input v-model.number="ruleForm.name" prefix-icon="el-icon-user" placeholder="请输入账号"></el-input>
        </el-form-item>

        <el-form-item  prop="pwd">
          <el-input type="password" v-model="ruleForm.pwd" autocomplete="off" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <router-link to="Regist">没有账号去注册</router-link>
        </el-form-item>

      </el-form>


    </div>
  </div>
</template>

<script>
import UserApi from '@/api/user/UserApi';
    var checkName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("用户名不能为空"));
      }else{
         if(value.length < 2){
          return callback(new Error("用户名长度要超过1位"));
        }
        callback();
      }
    };
    var validatePwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if(value.length < 3){
          return callback(new Error("密码长度要超过2位"));
        }
        callback();
      }
    };
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        name: '',
        pwd: ''
      },
      rules: {
        name: [{ validator: checkName, trigger: "blur" }],
        pwd: [{ validator: validatePwd, trigger: "blur" }],
      },
    };
  },
  created(){

    if(this.$route.params.id == 1){
      this.$message.warning("登录已过期请重新登录");
      this.$route.params.id = null;
    }
    window.clearTimeout(time1);
    this.open1();
    var time1=setTimeout(this.open2, 4000);
  },
  methods: {
    open1() {
        const h = this.$createElement;

        this.$notify({
          title: '管理员测试',
          message: h('i', { style: 'color: teal'}, '账号：ww 密码：123')
        });
      },
      open2() {
        const h = this.$createElement;

        this.$notify({
          title: '普通用户测试',
          message: h('i', { style: 'color: teal'}, '账号：qq 密码：123')
        });
      },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            UserApi.userLogin(this.ruleForm.name,this.ruleForm.pwd).then(res => {
              if (res.data.code == 1) {
          if (res.data.data.userStatus == 1) {
            // console.log(res.data.data.userInfo)
            // 状态正常
            // 将信息存到浏览器
            sessionStorage.setItem("userId", res.data.data.userId);
            sessionStorage.setItem("userName", res.data.data.userName);
            sessionStorage.setItem("userStatus", res.data.data.userStatus);
            sessionStorage.setItem("userAuth", res.data.data.userAuth);
            sessionStorage.setItem("token" ,res.data.data.token);
            sessionStorage.setItem("userInfo",JSON.stringify(res.data.data.userInfo));
            // 将用户信息存到vuex
            this.$store.commit("UserInfo/updataUserInfo",res.data.data.userInfo)
            this.$store.commit("UserInfo/updataUserImg",res.data.data.userInfo.avatar)
            // console.log(this.$store)
            if (res.data.data.userAuth == 1) {
              // 普通用户去前端页面
              this.$router.push({ path: "/frontHome/" });
              this.$message.success(res.data.message);
              this.load = false;
            } else if (res.data.data.userAuth == 2) {
              // root用户去后端页面
              this.$router.push({path: "/backHome/"});
              this.$message.success(res.data.message);
              this.load = false;
            }
          } else {
            // 状态不正常
            this.$message.error(res.data.message);
            this.load = false;
          }
        } else {
          this.$message.error(res.data.message);
          this.load = false;
        }
            })
        } else {
          this.$message.error("请按照要求输入用户名和密码")
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.wapper {
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(to right bottom, #552a50, #6681c5, #49d226);
}
.box1 {
  width: 360px;
  height: 300px;
  background: rgba(255, 255, 255, 0.2);
  /* 自决父相*/
  position: relative;
  /* 定位要使用下面的 */
  left: 50%;
  top: 50%;
  /* 位移自己宽度高度的一半 */
  transform: translate(-50%, -50%);
}
 span {
  position: absolute;
    left: 127px;
    top: 24px;
    color: rgba(255, 255, 255, 0.95);
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
form {
    width: 332px;
    top: 75px;
    left: -44px;
    position: absolute;
}
.el-input {
  width: 250px;
}
.el-icon-user:before {
    content: "\e6e3";
    position: absolute;
    top: 13px;
    left: 11px;
}
.el-icon-lock:before {
    content: "\e6e5";
    position: absolute;
    top: 13px;
    left: 11px;
}
a:-webkit-any-link {
  /* 路由的link */
  text-decoration: none;
  position: absolute;
  right: -14px;
  bottom: -10px;
}
</style>